// 详情页
<template>
  <div class="detailsBox">
    <!-- 隐藏头部 -->
    <div class="headNone">
      <div class="SiteBox">
        <!-- <span>深圳</span>
        <i class="iconfont">&#xe733;</i>-->
      </div>
      <div class="cityBox">{{ detailsData.name }}</div>
    </div>

    <router-link to="/home/NowPlay" tag="div" class="retreatBox">
      <i class="iconfont">&#xe601;</i>
    </router-link>

    <div class="film-poster">
      <img :src="detailsData.poster" alt>
    </div>
    <div class="film-detail detail-text">
      <div class="col">
        <div class="film-name">
          <span class="name">{{ detailsData.name }}</span>
          <span class="item">{{ detailsData.item && detailsData.item.name }}</span>
        </div>
        <div class="film-grade">
          <span class="grade">{{ detailsData.grade }}</span>
          <span class="grade-text">分</span>
        </div>
      </div>

      <div class="film-category grey-text">{{ detailsData.category }}</div>
      <div class="film-premiere-time grey-text">{{ detailsData.premiereAt }}上映</div>
      <div
        class="film-nation-runtime grey-text"
      >{{ detailsData.nation }}| {{ detailsData.runtime }}分钟</div>
      <div class="film-synopsis grey-text ziShe-text">{{ detailsData.synopsis }}</div>
      <div class="toggle" @click="clickToggle">
        <i class="iconfont icon-xiala">&#xe733;</i>
      </div>
      <p class="cut-off"></p>
      <div class="actorBox">
        <p class="staff">演职人员</p>
        <ul>
          <li v-for="(item,index) in detailsData.actors" :key="index">
            <img :src="item.avatarAddress">
            <strong class="strong">{{item.name}}</strong>
            <p class="daoYan">{{ item.role }}</p>
          </li>
        </ul>
      </div>
      <p class="cut-off"></p>
      <div class="actorBox2">
        <p class="staff2">
          <span class="span1">剧照</span>
          <span class="span2">全部(6)&nbsp;></span>
        </p>
        <div class="ulDiv">
          <ul>
            <li v-for="(item,index) in detailsData.photos" :key="index">
              <img :src="item">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="ChooseATicket">选座购票</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "datailsFilm",

  data() {
    return {
      filmName: "",
      detailsData: ""
    };
  },

  watch: {
    // $route (newVal, oldVal) {
    //   // 监听$route 发生变化，我就请求后台数据
    //   this.getFilmDetail();
    // }
  },

  methods: {
    clickToggle() {
      // this.ziSheText.style.height = "77px";
    }
  },

  // 页面创建之后就发送ajax
  created() {
    // ajax请求接口，1.url。2.请求的参数。3.后台响应回来的数据
    axios
      .get("/api/films/details", {
        params: {
          filmId: this.$route.params.filmId //获取前端请求的参数。vue插件下面
        }
      }) //请求回来
      .then(res => {
        let result = res.data; // 请求回来的数据
        // 如果请求回来的数据的code===1是响应成功的状态
        if (result.code === 0) {
          this.detailsData = result.data[0]; //后台拉取的数据赋值给前端的状态数据
          console.log(this.detailsData);
          console.log("请求成功");
        } else {
          console.log("请求失败");
        }
      });
  },

  // 这三个就是组件内的守卫
  beforeRouteEnter(to, from, next) {
    console.log("进入到详情");
    next();
  },

  beforeRouteUpdate(to, from, next) {
    console.log("详情页组件路由有更新的情况, 会进来");
    // 上面 watch $route 的代码可以在这里写
    this.getFilmDetail();
    next();
  },

  beforeRouteLeave(to, from, next) {
    console.log("详情页离开之前，会调用");
    next();
  }
};
</script>

<style lang="scss">
@import "@/style/common/px2rem.scss";

.detailsBox {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .retreatBox {
    display: flex;
    justify-content: center;
    align-items: center;
    height: px2rem(35);
    width: px2rem(35);
    background: #000;
    opacity: 0.2;
    border-radius: 50%;
    position: fixed;
    top: 1%;
    left: 5%;
    z-index: 1;
    .iconfont {
      font-size: px2rem(22);
      color: white;
    }
  }

  .film-poster {
    height: px2rem(210);
    width: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .film-detail {
    padding-top: px2rem(12);
    background-color: #fff;
    height: px2rem(187) !important;

    .col {
      display: flex;
      align-items: center;
      padding: px2rem(0) px2rem(15) px2rem(0) px2rem(15);
    }

    .film-name {
      flex: 1;
      display: flex;
      align-items: center;

      .name {
        color: #191a1b;
        font-size: px2rem(18);
        height: px2rem(24);
        line-height: px2rem(24);
        margin-right: px2rem(8);
      }

      .item {
        font-size: px2rem(12);
        color: #fff;
        background-color: #d2d6dc;
        height: px2rem(14);
        line-height: px2rem(14);
        padding: 0 px2rem(2);
        border-radius: px2rem(2);
        display: inline-block;
      }
    }

    .film-grade {
      flex-shrink: 0;
      width: px2rem(100);
      text-align: right;
      color: #ffb232;
      font-size: px2rem(12);

      .grade {
        font-size: px2rem(18);
        font-style: italic;
      }
    }

    .grey-text {
      font-size: px2rem(13);
      line-height: px2rem(20);
      color: #797d82;
      margin-top: px2rem(4);
      padding: px2rem(0) px2rem(15) px2rem(0) px2rem(15);
    }
    .ziShe-text {
      height: px2rem(40);
    }

    .film-synopsis {
      margin-top: px2rem(8);
      overflow: hidden;
      &.hide {
        height: px2rem(40);
      }
    }

    .toggle {
      text-align: center;
      // border-bottom: px2rem(5) solid rgb(244, 244, 244);
      &.hide {
        i {
          transform: translate(180deg);
        }
      }
    }
    .cut-off {
      height: px2rem(5);
      border: px2rem(5) solid rgb(244, 244, 244);
    }
    .actorBox {
      height: px2rem(194);
      padding-left: px2rem(15);
      padding-right: px2rem(15);
      box-sizing: border-box;
      overflow: hidden;
      .staff {
        height: px2rem(52);
        line-height: px2rem(45);
        font-size: px2rem(16);
      }
      ul {
        height: px2rem(150);
        display: flex;
        overflow-x: auto;
        li {
          width: px2rem(85);
          height: px2rem(85);
          margin-right: px2rem(10);
          img {
            width: px2rem(85);
            height: 100%;
          }
          .strong {
            display: block;
            height: px2rem(28);
            font-size: px2rem(13);
            line-height: px2rem(28);
            text-align: center;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .daoYan {
            // height: px2rem(28);
            font-size: px2rem(11);
            text-align: center;
            color: rgb(121, 125, 130);
          }
        }
      }
    }
    .actorBox2 {
      height: px2rem(194);
      box-sizing: border-box;
      overflow: hidden;
      margin-bottom: px2rem(49);

      .staff2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: px2rem(68);
        padding: px2rem(15);
        font-size: px2rem(16);

        .span2 {
          color: rgb(144, 147, 152);
          font-size: px2rem(14);
        }
      }
      .ulDiv {
        height: px2rem(100);
        padding-right: px2rem(15);
        padding-left: px2rem(15);
        box-sizing: border-box;
        overflow: hidden;
        display: flex;
        overflow-x: auto;

        ul {
          // width: 100%;
          height: px2rem(100);
          display: flex;

          li {
            display: flex;
            width: px2rem(150);
            height: px2rem(100);
            margin-right: px2rem(10);
            line-height: px2rem(100);
            align-items: center;

            img {
              width: px2rem(150);
            }
          }
        }
      }
    }
  }
  .ChooseATicket {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: px2rem(49);
    background: rgb(255, 95, 22);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: px2rem(18);
    color: #fff;
    max-width: 540px;
  }
  // ===============隐藏的头部==========
  .headNone {
    // position: sticky;
    // top: 0;
    width: 100%;
    height: px2rem(45);
    background: #fff;
    z-index: 1;
    flex-direction: row;
    // display: none;

    .SiteBox {
      display: flex;
      float: left;
      width: 25%;
      height: 100%;

      // justify-content: center;
      // align-items: center;

      span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: px2rem(75);
        height: 100%;
        font-size: px2rem(16);
      }

      .iconfont {
        position: relative;
        margin-top: 50%;
        right: px2rem(10);
        top: px2rem(-32);
        font-size: px2rem(18);
      }
    }

    .cityBox {
      display: flex;
      width: 50%;
      height: 100%;
      justify-content: center;
      align-items: center;
      font-size: px2rem(18);
    }
  }
}
</style>
